
<style >
	.ten-box {
		width: 100%;
		height: 100%;
	}
	.dict{
		width: 160px;
		padding: 10px;
		min-height: 200px;
		position: fixed;
		color: #606266;
		background: #fff;
		text-align: center;
		border: 1px solid #E5E5E5;
	}
</style>
<template>
	<div class="ten-box">
		<div class="ten-btn" v-if="showTabFlag">
			<el-row>
				<el-button type="primary" size="small" @click="setNewPlan">
					新建保养方案
				</el-button>
			</el-row>
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;display: flex;margin-top: 10px;">
				<el-input placeholder="保养方案名称" v-model="keyword"  style="width:200px; margin-right: 10px;"></el-input>
				<el-button type="primary" @click="search">搜索</el-button>
			</el-col>
			<el-table :data="planList" highlight-current-row  ref="multipleTable" style="width: 120%;">

				<el-table-column type="index" label="序号" width="60"></el-table-column>
				<el-table-column prop="name" label="保养方案名称" sortable></el-table-column>
				<!--<el-table-column label="商品编码" sortable>
					<template scope="scope">
						<span>{{scope.row.goodsModelNumber}}</span>
					</template>
				</el-table-column>-->
				<el-table-column prop="bsName" label="关联品牌及车型" sortable>
					<template scope="scope">
						<span 
							style="width: 100%;display: inline-block;cursor: pointer;padding: 10px;height: 40px;overflow: hidden;" 
							@mouseout="changeOut"
							@mouseover="changeStyle($event,scope.row.bsName)">
							
							{{scope.row.bsName}}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="creator" label="创建人" sortable></el-table-column>
				<el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
				
				
				<el-table-column label="操作" width="350">
					<template scope="scope">
						<el-button size="mini" @click="doEdit(scope.row)" type="info" plain >
							重新导入
						</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" plain >
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="block" align="right">
				<br>
				<el-pagination 
					:page-size="10"
					:current-page.sync="page" 
					@current-change="handleCurrentChange" 
					layout=" prev, pager, next" 
					:total="count">
				</el-pagination>
			</div>
		</div>
		<upload-box v-else :plan-parent-id="planParentId" @gopLanList="gopLanList"></upload-box>
	</div>
</template>

<script>
	import * as Api from "@/api/Api.js";
	import * as Config from "@/api/Config.js";
	import uploadBox  from './components/uploadBox'
	export default {
		data(){
			return {
				page:1,
				keyword:'',
				pageSize:10,
				planList:[],
				count:0,
				planParentId:'',
				showTabFlag: true,
				
			}
		},
		created(){
			this._getPlanList()
		},
		components:{
			uploadBox
		},
		methods: {
			changeOut() {
				setTimeout(() => {
					document.body.removeChild(document.getElementById('dictBox'))
				},200)
			},
			changeStyle(event,value){
				console.log()
				let distDiv = document.createElement('div')
				distDiv.className = 'dict'
				distDiv.id = 'dictBox'
				document.body.appendChild(distDiv)
				distDiv.style.left = event.pageX + 'px'
				distDiv.style.top = (event.pageY-document.documentElement.scrollTop) + 'px'
				distDiv.innerHTML = value
			},
			gopLanList(){
				this._getPlanList()
				this.planParentId = ''
				this.showTabFlag = true
			},
			doEdit(item){
				this.planParentId = item.id
				this.showTabFlag = false
			},
			setNewPlan(){
				this.showTabFlag = false
			},
			handleDelete(index,item){
				this.$confirm("确定删除此条保养方案?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						let model = {
							planId: item.id,
						};
						Api.linkDelete(this, model).then(res => {
							if(res.retCode) {
								this.$message("删除成功");
								this._getPlanList();
							} else {
								this.$alert("删除失败");
							}
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
			search() {
				
				this.page =  1
				this._getPlanList()
			},
			handleCurrentChange(val) {
				console.log(val);
				this.page = val;
				this._getPlanList();
			},
			_getPlanList(){
				let pageIndex = this.page - 1; // 第几页.
				let params = {
					page: pageIndex,
					pageSize: this.pageSize,
					keyword: this.keyword
				};
				Api.getPlanList(this,params).then(res => {
					console.log(res)
					if(res.retCode) {

						this.planList = res.data.list
						this.count = res.data.page.total;
						
					} else {
						this.$message(res.message);
					}
				});
			}
		}
	}
</script>
